<template>
    <div class="background-layer">
        <div class="overlay-layer">
            <el-card class="login-panel">
                <div class="login-left">
                    <h2 class="title">超市管理系统</h2>
                    <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.username" placeholder="请输入账号">
                                <template #prefix>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                                <template #prefix>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="phonenumber">
                            <el-input v-model="loginForm.phonenumber" placeholder="请输入手机号">
                                <template #prefix>
                                    <el-icon>
                                        <Phone />
                                    </el-icon>
                                </template>
                                <template #append>
                                    <el-button type="primary" @click="handleGetCaptcha" :disabled="countdown > 0">
                                        {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="captcha">
                            <el-input v-model="loginForm.captcha" placeholder="请输入验证码">
                                <template #prefix>
                                    <el-icon>
                                        <Key />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin" class="login-btn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="login-right"></div>

            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { User, Lock, Key, Phone } from "@element-plus/icons-vue";


const router = useRouter();
const countdown = ref(0);
const timer = ref<number | null>(null);

const loginForm = ref({
    username: "",
    password: "",
    captcha: "",
    phonenumber: "",
    rememberMe: false,
});

const loginFormRef = ref();

onMounted(() => {
    const savedUser = localStorage.getItem("savedUser");
    if (savedUser) {
        const { username, password, rememberMe } = JSON.parse(savedUser);
        loginForm.value = { ...loginForm.value, username, password, rememberMe };
    }
});

const rules = {
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    phonenumber: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入合法的手机号",
            trigger: "blur"
        }
    ],
    captcha: [{ required: true, message: "请输入验证码", trigger: "blur" },
    {
        pattern: /^\d{4}$/,
        message: "请输入4位数字验证码",
        trigger: "blur"
    }

    ],
};

const handleGetCaptcha = () => {
    // 验证手机号合法
    const pattern = /^1[3-9]\d{9}$/;
    if (!pattern.test(loginForm.value.phonenumber)) {
        ElMessage.error("请输入合法的手机号！");
        return;
    }

    // 模拟验证码发送
    ElMessage.success(`验证码已发送到 ${loginForm.value.phonenumber}`);

    // 启动倒计时
    countdown.value = 60;  // 60 秒
    timer.value = window.setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0 && timer.value) {
            clearInterval(timer.value);
            timer.value = null;
        }
    }, 1000);
};


const handleLogin = () => {
    (loginFormRef.value as any).validate((valid: boolean) => {
        if (valid) {
            if (loginForm.value.username === "admin" && loginForm.value.password === "123456" && loginForm.value.captcha === "9563") {
                ElMessage.success("登录成功！");
                localStorage.setItem("token", "your-secure-token");
                if (loginForm.value.rememberMe) {
                    localStorage.setItem("savedUser", JSON.stringify(loginForm.value));
                } else {
                    localStorage.removeItem("savedUser");
                }
                router.push("/dashboard");
            } else {
                ElMessage.error("账号、密码或验证码错误！");
            }
        } else {
            ElMessage.error("请填写完整信息！");
        }
    });
};

</script>

<style scoped>
/* 背景层：全屏渐变 */
.background-layer {
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #89f7fe, #66a6ff);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 半透明模糊覆盖层 */
.overlay-layer {
    width: 90%;
    max-width: 1000px;
    height: 600px;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 登录面板整体 */
.login-panel {
    width: 90%;
    height: 90%;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    background-image: url("../../assets/login3.png");
    background-position-x: 450px;
    background-position-y: 55px;
    background-repeat: no-repeat;

}

/* 左边：登录表单 */
.login-left {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    ;
}

.title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

.login-form {
    width: 100%;
}

.login-btn {
    width: 100%;
}

/* 右边：留空给图片 */
.login-right {
    flex: 1;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
